<script setup>
	import {
		onActivated,
		onMounted,
		ref
	} from 'vue';
	import {
		useRoute
	} from 'vue-router'
	import {
		navigateBack,
		redirectToMemorialHall,
		navigateToMemorialRecord,
		navigateToLanternRecord,
		navigateToSacrificeRecord,
		navigateToLightingRecord,
		navigateToCandleLightRecord,
		navigateToFamily,
		navigateToSpaceDetails,
		navigateToUpToSacrificeSetting,
		navigateToUpToInviteCreate,
		navigateToArticle,
	} from "@/assets/scripts/navigate.js"
	import {
		getCommonCheckListApi,
		getArticleApi,
	} from "@/assets/api/other/spaceDetails.js"
	import {
		getInfo2Api,
	} from "@/assets/api/other/recommend.js"
	import {
		memorialHallApi,
		relationApi,
		getMsgApi,
		getOfferingListApi,
	} from "@/assets/api/other/memorialHall.js"
	import {
		getRelationListApi,
	} from "@/assets/api/other/space.js"
	import titleColumn from '@/components/titleColumn.vue'
	import leaveMessageCard from '@/components/leaveMessageCard.vue'
	import articleCard from '@/components/articleCard.vue'
	import record from '@/components/record.vue'

	const meMemorialId = ref('')
	const relation = ref('')
	const msgDetail = ref('')
	const showUrl = ref([])
	const show = ref(false)
	const dataSource = ref({})
	const userInfo = ref({})
	const familyPopup = ref()
	const msgModal = ref()
	const relationPicker = ref()
	const leaveMessageList = ref([])
	const leaveMessageTotal = ref(0)
	const candleLightList = ref([])
	const candleLightTotal = ref(0)
	const lightingList = ref([])
	const lightingTotal = ref(0)
	const lanternList = ref([])
	const lanternTotal = ref(0)
	const oblationList = ref([])
	const oblationTotal = ref(0)
	const familyList = ref([])
	const familyTotal = ref(0)
	const memorialNum = ref(0)
	const imageList = ref([])
	const imageTotal = ref(0)
	const videoList = ref([])
	const videoTotal = ref(0)
	const articleList = ref([])
	const articleTotal = ref(0)

	const relationColumnData = [
		['儿子', '女儿', '孙子', '孙女', '外孙', '外孙女', '外甥', '外甥女', '侄子侄女', '儿媳', '女婿', '孙媳妇', '孙女婿', '外孙媳妇', '外孙女婿', '外甥媳妇',
			'外甥女婿', '侄媳妇', '侄女婿', '外孙/外孙女', '孙子/孙女', '儿子/女儿', '侄子/侄女', '外甥外甥女', '侄儿', '子侄辈', '后裔'
		],
		['丈夫', '妻子', '姐姐', '妹妹', '哥哥', '弟弟', '表哥', '表姐', '堂哥', '堂姐', '堂弟', '堂妹', '表弟', '表妹', '表嫂', '表姐夫', '姐夫',
			'嫂子',
			'弟媳', '弟妹', '哥姐', '妹夫'
		],
		['父亲', '母亲', '伯伯', '伯母', '叔叔', '婶婶', '姑姑', '姑父', '姨妈', '姨夫', '舅舅', '舅妈', '双亲', '父母', '公婆', '岳父母'],
		['挚友', '亲友', '朋友', '战友', '老师', '同学', '学生', '领导', '同事', '邻居', '远亲'],
		['祖父', '祖母', '外祖父', '外祖母', '祖父母', '外祖父母'],
		['粉丝', '故人', '男朋友', '女朋友', '其他'],
	]
	const relationColumns = ref([
		[
			'儿孙辈', '同辈', '父辈', '亲朋好友', '祖辈', '其他'
		],
		[]
	])

	const handleImgClick = (url) => {
		showUrl.value = url
		show.value = true
	}

	const handleLookMsg = (item) => {
		msgDetail.value = item.ccContent
		msgModal.value.open()
	}

	const handleSetting = () => {
		if (dataSource.value.createBy == userInfo.value.userId) {
			navigateToUpToSacrificeSetting(meMemorialId.value)
		} else {
			uni.showToast({
				title: '权限不足',
				icon: 'error'
			})
		}
	}

	const familyBtn_handleConfirm = async () => {
		if (relation.value.length == 0) {
			uni.showToast({
				title: '请选择关系'
			})
			return
		}
		const res = await relationApi({
			isPass: '否',
			isAdmin: '否',
			meMemorialId: meMemorialId.value,
			relation: relation.value,
		})
		if (res.code === 200) {
			uni.showToast({
				title: '成功',
				icon: 'success',
				complete: () => {
					familyPopup.value.close()
					data_init() // 请求数据
					relation.value = ''
				}
			})
		}
	}

	const handleSelectRelation = () => {
		relationPicker.value.setColumnValues(1, relationColumnData[0]);
		relationPicker.value.open()
	}

	const relation_handleChange = (e) => {
		if (e.columnIndex == 0) {
			relationPicker.value.setColumnValues(1, relationColumnData[e.index]);
		}
	}

	const relation_handleConfirm = (e) => {
		relation.value = e.value[1]
		relationPicker.value.close()
	}

	const dev_handleClick = () => {
		uni.showToast({
			title: '功能开发中',
			icon: 'loading',
		})
	}

	onMounted(() => {
		route_init() // 路由参数
		data_init() // 纪念馆数据
		leaveMessageList_init() // 留言数据
		lightingList_init() // 点灯数据
		candleLightList_init() // 烛光数据
		lanternList_init() // 挂灯笼数据
		oblationList_init() // 供奉数据
		familyList_init() // 亲友团数据
		imageList_init() // 相册数据
		videoList_init() // 视频数据
		articleList_init() // 文章数据
		userInfo_init() // 用户信息
	})

	onActivated(() => {
		route_init() // 路由参数
		data_init() // 纪念馆数据
		leaveMessageList_init() // 留言数据
		lightingList_init() // 点灯数据
		candleLightList_init() // 烛光数据
		lanternList_init() // 挂灯笼数据
		oblationList_init() // 供奉数据
		familyList_init() // 亲友团数据
		imageList_init() // 相册数据
		videoList_init() // 视频数据
		articleList_init() // 文章数据
		userInfo_init() // 用户信息
	})

	const route_init = async () => {
		const route = useRoute()
		if (route.query.meMemorialId && route.query.meMemorialId !== 'undefined') {
			meMemorialId.value = route.query.meMemorialId
		}
	}

	const data_init = async () => {
		const res = await memorialHallApi(meMemorialId.value)
		if (res.code === 200) {
			dataSource.value = res.data
		}
	}

	const leaveMessageList_init = async () => {
		const res = await getMsgApi(meMemorialId.value)
		if (res.code === 200) {
			leaveMessageList.value = res.rows
			leaveMessageTotal.value = res.total
		}
	}

	const lightingList_init = async () => {
		const res = await getOfferingListApi(meMemorialId.value, '点灯', '')
		if (res.code === 200) {
			lightingList.value = res.rows
			lightingTotal.value = res.total
		}
	}

	const candleLightList_init = async () => {
		const res = await getOfferingListApi(meMemorialId.value, '烛光', '')
		if (res.code === 200) {
			candleLightList.value = res.rows
			candleLightTotal.value = res.total
		}
	}

	const lanternList_init = async () => {
		const res = await getOfferingListApi(meMemorialId.value, '灯笼', '')
		if (res.code === 200) {
			lanternList.value = res.rows
			lanternTotal.value = res.total
		}
	}

	const oblationList_init = async () => {
		const res = await getOfferingListApi(meMemorialId.value, '祭奠', "")
		if (res.code === 200) {
			oblationList.value = res.rows
			oblationTotal.value = res.total
		}
	}

	const familyList_init = async () => {
		const res = await getRelationListApi(meMemorialId.value)
		if (res.code === 200) {
			let total = 0
			for (let i = 0; i < res.rows.length; i++) {
				const element = res.rows[i]
				total += parseInt(element.memorialNum)
			}
			memorialNum.value = total
			familyTotal.value = res.total
			familyList.value = res.rows
		}
	}

	const imageList_init = async () => {
		const res = await getCommonCheckListApi(meMemorialId.value, '相册')
		if (res.code === 200) {
			imageList.value = res.rows
			imageTotal.value = res.total
		}
	}

	const videoList_init = async () => {
		const res = await getCommonCheckListApi(meMemorialId.value, '视频')
		if (res.code === 200) {
			videoList.value = res.rows
			videoTotal.value = res.total
		}
	}

	const articleList_init = async () => {
		const res = await getArticleApi(meMemorialId.value)
		if (res.code === 200) {
			articleList.value = res.rows
			articleTotal.value = res.total
		}
	}

	const userInfo_init = async () => {
		const user = uni.getStorageSync('user')
		const res = await getInfo2Api(user.userId)
		if (res.code === 200) {
			userInfo.value = res.user
			uni.setStorageSync('user', res.user)
		} else {
			uni.showToast({
				title: '获取用户信息失败',
				icon: 'error',
			})
		}
	}
</script>

<template>
	<view class="">

		<uv-overlay :show="show" @click="show = false">
			<view class="img-url" @click="show = false">
				<image :src="showUrl" @click="show = false" mode="widthFix" class="image image-fill-x"></image>
			</view>
		</uv-overlay>

		<uv-modal ref="msgModal" title="留言消息" confirmText="关闭">
			<view class="slot-content" style="width: 100%;">
				<scroll-view scroll-y="true" class="msg-scroll-view">
					<!-- <view class='msg' v-html="msgDetail"></view> -->
					<uni-easyinput style="display: block; width: 100%; " :styles="{disableColor:'#333'}" type="textarea"
						disabled v-model="msgDetail" placeholder="输入你对逝者的思念"></uni-easyinput>
				</scroll-view>
			</view>
		</uv-modal>

		<uv-picker ref="relationPicker" :columns="relationColumns" style="z-index: 13000;"
			@change="relation_handleChange" @confirm="relation_handleConfirm"></uv-picker>

		<uv-popup ref="familyPopup" mode="center" round='10' closeable>
			<view class="family-popup">
				<view class="font-fs20 font-wb d-flex d-flex-jcc color-333">
					欢迎你加入亲友团
				</view>
				<view class="px-big mt-big">
					<uv-input placeholder="如儿子,女儿" disabled border="none" v-model="relation"
						@click="handleSelectRelation" :customStyle="{height:'46px', padding:'0 15px'}">
						<template v-slot:prefix>
							<uv-text text="您是逝者的:" margin="0 3px 0 0" type="tips"></uv-text>
						</template>
					</uv-input>
				</view>
				<view class="px-big mt-big">
					<view class="px-big ">
						<uv-button type="success" text="确定" shape='circle' @click="familyBtn_handleConfirm"></uv-button>
					</view>
				</view>
			</view>
		</uv-popup>


		<view class="banner">
			<uv-navbar :fixed="false" bgColor="transparent" class="navbar" leftIconColor='#fff'
				:titleStyle="{color:'#fff'}" title="追忆空间" rightText='分享' rightIcon='share-fill'>
				<template v-slot:left>
					<view class="d-flex d-flex-aic" @click="navigateBack">
						<uv-icon name="arrow-left" color="#fff" size="19"></uv-icon>
						返回纪念馆
						<!-- <uv-icon class="ml-small" name="home" color="#fff"
							@click="redirectToMemorialHall(meMemorialId, 1)" size="20"></uv-icon> -->
					</view>
				</template>
				<template v-slot:right>
					<view class="d-flex d-flex-aic" @click="navigateToUpToInviteCreate(meMemorialId)">
						<uv-icon name="share-fill" size="19" color="#fff"></uv-icon>
						<view class="ml-small">
							分享
						</view>
					</view>
				</template>
			</uv-navbar>
			<image src="@/assets/pic/space-bg.png" mode="widthFix" class="image image-fill-x bg">
			</image>
			<view class="info">

				<template v-if="dataSource.mmType === 'mm_type_one'">
					<view>
						<view class="avatar">
							<view class="circle1"></view>
							<view class="circle2"></view>
							<view class="circle3"></view>
							<!-- <uv-avatar class="png" :src="dataSource.mmImg1" size="54"></uv-avatar> -->
							<view class="png" style="width: 54px; height: 54px; border-radius: 50%; overflow: hidden;">
								<image :src="dataSource.mmImg1" mode="widthFix" class="image image-fill-x"></image>
							</view>
						</view>
						<view class="name">{{dataSource.mmName1}}</view>
					</view>
				</template>

				<template v-if="dataSource.mmType === 'mm_type_two'">
					<view class="">
						<view class="d-flex d-flex-jcsb avatar-group">
							<view class="avatar">
								<view class="circle1"></view>
								<view class="circle2"></view>
								<view class="circle3"></view>
								<!-- <uv-avatar class="png" :src="dataSource.mmImg1" size="54"></uv-avatar> -->
								<view class="png"
									style="width: 54px; height: 54px; border-radius: 50%; overflow: hidden;">
									<image :src="dataSource.mmImg1" mode="widthFix" class="image image-fill-x"></image>
								</view>
							</view>
							<view class="avatar">
								<view class="circle1"></view>
								<view class="circle2"></view>
								<view class="circle3"></view>
								<!-- <uv-avatar class="png" :src="dataSource.mmImg2" size="54"></uv-avatar> -->
								<view class="png"
									style="width: 54px; height: 54px; border-radius: 50%; overflow: hidden;">
									<image :src="dataSource.mmImg2" mode="widthFix" class="image image-fill-x"></image>
								</view>
							</view>
						</view>
						<view class="name">{{dataSource.mmName1}} &&
							{{dataSource.mmName2}}
						</view>
					</view>
				</template>

				<view class="uid">
					纪念馆ID: {{parseInt(dataSource.id)%1000}}
				</view>
			</view>
		</view>
		<view class="px-normal pb-normal main">
			<view class="p-normal box class">
				<view class="d-flex statistics">
					<view class="d-flex-fx1 d-flex d-flex-fdc d-flex-jcc d-flex-aic item"
						@click="navigateToMemorialRecord(dataSource.id, 0)">
						<view class="font-wb font-fs18 value">{{dataSource.memorialValue}}</view>
						<view class="font-fs12 mt-normal label">缅怀值</view>
						<uv-line direction="col" color="#dedede" length="20" class="line"></uv-line>
					</view>
					<view class="d-flex-fx1 d-flex d-flex-fdc d-flex-jcc d-flex-aic item"
						@click="navigateToMemorialRecord(dataSource.id, 1)">
						<view class="font-wb font-fs18 value">{{dataSource.mmNum}}</view>
						<view class="font-fs12 mt-normal label">来访值</view>
						<uv-line direction="col" color="#dedede" length="20" class="line"></uv-line>
					</view>
					<view class="d-flex-fx1 d-flex d-flex-fdc d-flex-jcc d-flex-aic item"
						@click="navigateToFamily(dataSource.id)">
						<view class="font-wb font-fs18 value">{{familyTotal}}</view>
						<view class="font-fs12 mt-normal label">亲友数</view>
						<uv-line direction="col" color="#dedede" length="20" class="line"></uv-line>
					</view>
					<view class="d-flex-fx1 d-flex d-flex-fdc d-flex-jcc d-flex-aic item"
						@click="navigateToFamily(dataSource.id)">
						<view class="font-wb font-fs18 value">{{memorialNum}}</view>
						<view class="font-fs12 mt-normal label">缅怀次数</view>
					</view>
				</view>
				<view class="d-flex d-flex-fww pt-normal list">
					<view class="d-flex d-flex-fdc d-flex-jcc d-flex-aic mt-normal item"
						@click="redirectToMemorialHall(meMemorialId, 1)">
						<image src="@/assets/pic/space-btn-1.png" mode="scaleToFill" class="image image-fill icon">
						</image>
						<view class="font-fs14 mt-small title">
							主页
						</view>
					</view>
					<view class="d-flex d-flex-fdc d-flex-jcc d-flex-aic mt-normal item"
						@click="navigateToSpaceDetails(meMemorialId, 0)">
						<image src="@/assets/pic/space-btn-2.png" mode="scaleToFill" class="image image-fill icon">
						</image>
						<view class="font-fs14 mt-small title">
							基本信息
						</view>
					</view>
					<view class="d-flex d-flex-fdc d-flex-jcc d-flex-aic mt-normal item"
						@click="navigateToSpaceDetails(meMemorialId, 1)">
						<image src="@/assets/pic/space-btn-3.png" mode="scaleToFill" class="image image-fill icon">
						</image>
						<view class="font-fs14 mt-small title">
							音容相貌
						</view>
					</view>
					<view class="d-flex d-flex-fdc d-flex-jcc d-flex-aic mt-normal item"
						@click="navigateToSpaceDetails(meMemorialId, 4)">
						<image src="@/assets/pic/space-btn-4.png" mode="scaleToFill" class="image image-fill icon">
						</image>
						<view class="font-fs14 mt-small title">
							追忆文章
						</view>
					</view>
					<template v-if="dataSource.meT==='0'">
						<view class="d-flex d-flex-fdc d-flex-jcc d-flex-aic mt-normal item" @click="dev_handleClick">
							<image src="@/assets/pic/space-btn-5.png" mode="scaleToFill" class="image image-fill icon">
							</image>
							<view class="font-fs14 mt-small title">
								家谱
							</view>
						</view>
						<view class="d-flex d-flex-fdc d-flex-jcc d-flex-aic mt-normal item"
							@click="navigateToFamily(dataSource.id)">
							<image src="@/assets/pic/space-btn-6.png" mode="scaleToFill" class="image image-fill icon">
							</image>
							<view class="font-fs14 mt-small title">
								亲友团
							</view>
						</view>
						<view class="d-flex d-flex-fdc d-flex-jcc d-flex-aic mt-normal item" @click="handleSetting">
							<image src="@/assets/pic/space-btn-7.png" mode="scaleToFill" class="image image-fill icon">
							</image>
							<view class="font-fs14 mt-small title">
								设置
							</view>
						</view>
						<view class="d-flex d-flex-fdc d-flex-jcc d-flex-aic mt-normal item"
							@click="redirectToMemorialHall(meMemorialId, 1)">
							<image src="@/assets/pic/space-btn-8.png" mode="scaleToFill" class="image image-fill icon">
							</image>
							<view class="font-fs14 mt-small title">
								去祭拜
							</view>
						</view>
					</template>
				</view>
			</view>

			<view class="p-normal mt-normal box" v-if="dataSource.meT==='0'">
				<titleColumn @clickMore="navigateToFamily(dataSource.id)">
					<template #title>
						<view>纪念馆亲友团[{{familyTotal}}]</view>
					</template>
					<template #content>
						<view class="user-list-box">
							<view class="d-flex d-flex-fww user-list">
								<view class="d-flex-fs0 item" v-for="(item, index) in familyList" :key="index">
									<uv-avatar shape="square" :src="item.sysUser.avatar" size="46"></uv-avatar>
									<view class="text-ellipsis-1 font-fs12 mt-small name">
										{{item.sysUser.nickName}}
									</view>
								</view>
							</view>
							<view class="d-flex d-flex-jcsb d-flex-aic font-fs12  foot">
								<view class="d-flex d-flex-aic d-flex-jcc ">
									已有 <view class="count">
										{{familyTotal}}
									</view> 加入团队
								</view>
								<view class="p-small btn" @click="familyPopup.open()">
									我要加入/修改关系
								</view>
							</view>
						</view>
					</template>
				</titleColumn>
			</view>

			<view class="p-normal mt-normal box">
				<titleColumn @clickMore="navigateToSpaceDetails(meMemorialId,0)">
					<template #title>
						<view>人物简介</view>
					</template>
					<template #content>
						<view class="profile">
							<view class="d-flex d-flex-jcsb mb-normal">
								<view class="d-flex-fx1 info">
									<view class="d-flex mb-small">
										逝者姓名： <view class="value">{{dataSource.mmName1}}</view>
									</view>
									<view class="d-flex mb-small">
										逝者性别： <view class="value">{{dataSource.mmSex1 == '0' ? '男' : '女'}}</view>
									</view>
									<view class="d-flex mb-small">
										出生日期： <view class="value">
											<view class="mr-small">
												<span class="lunar"
													v-if="dataSource.mmDate1==='time_type_private'">农</span>
												<span class="gregorian" v-else>公</span>
											</view>
										</view>
										{{dataSource.mmBorn1}}
									</view>
									<view class="d-flex mb-small">
										逝世日期： <view class="value">
											<view class="mr-small">
												<span class="lunar"
													v-if="dataSource.mmDate1==='time_type_private'">农</span>
												<span class="gregorian" v-else>公</span>
											</view>
										</view>
										{{dataSource.mmPassAwayDate1}}
									</view>
								</view>
								<view class="d-flex-fs0 avatar">
									<image :src="dataSource.mmImg1" mode="scaleToFill" class="image image-fill">
									</image>
								</view>
							</view>
							<view class="d-flex d-flex-jcsb" v-if="dataSource.mmType==='mm_type_two'">
								<view class="d-flex-fx1 info">
									<view class="d-flex mb-small">
										逝者姓名： <view class="value">{{dataSource.mmName2}}</view>
									</view>
									<view class="d-flex mb-small">
										逝者性别： <view class="value">{{dataSource.mmSex2 == '0' ? '男' : '女'}}</view>
									</view>
									<view class="d-flex mb-small">
										出生日期： <view class="value">
											<view class="mr-small">
												<span class="lunar"
													v-if="dataSource.mmDate2==='time_type_private'">农</span>
												<span class="gregorian" v-else>公</span>
											</view>
										</view>
										{{dataSource.mmBorn2}}
									</view>
									<view class="d-flex mb-small">
										逝世日期： <view class="value">
											<view class="mr-small">
												<span class="lunar"
													v-if="dataSource.mmDate2==='time_type_private'">农</span>
												<span class="gregorian" v-else>公</span>
											</view>
										</view>
										{{dataSource.mmPassAwayDate2}}
									</view>
								</view>
								<view class="d-flex-fs0 avatar">
									<image :src="dataSource.mmImg2" mode="scaleToFill" class="image image-fill">
									</image>
								</view>
							</view>
							<view class="mt-big" v-if="dataSource.epitaph">
								<view class="">
									墓志铭
								</view>
								<view class="p-small mt-small text">
									{{dataSource.epitaph}}
								</view>
							</view>
							<view class="mt-big" v-if="dataSource.desc">
								<view class="">
									人物简介
								</view>
								<view class="p-small mt-small text">
									{{dataSource.desc}}
								</view>
							</view>
						</view>
					</template>
				</titleColumn>
			</view>

			<view class="p-normal mt-normal box">
				<titleColumn @clickMore="navigateToSpaceDetails(meMemorialId,1)">
					<template #title>
						<view>相册[{{imageTotal}}]</view>
					</template>
					<template #content>
						<uv-empty mode="list" icon="empty-favor" v-if="!imageTotal"></uv-empty>
						<!-- <uv-album :urls="imageList.map(o=>o.ccContent)"></uv-album> -->
						<view class="d-flex d-flex-fww album">
							<div class="item" v-for="(item, index) in imageList" :key="index">
								<image @click="handleImgClick(item.ccContent)" :src="item.ccContent"
									class="image image-fill-x" mode="widthFix"></image>
							</div>
						</view>
					</template>
				</titleColumn>
			</view>

			<view class="p-normal mt-normal box">
				<titleColumn @clickMore="navigateToSpaceDetails(meMemorialId,2)">
					<template #title>
						<view>视频[{{videoTotal}}]</view>
					</template>
					<template #content>
						<uv-empty mode="list" icon="empty-favor" v-if="!videoTotal"></uv-empty>
						<view class="videoList">
							<view v-for="(item, index) in videoList.filter((o,i)=>i<1)" :key="index" class="item">
								<view class="video-box">
									<video class="video" :src="item.ccContent" controls>
									</video>
								</view>
								<view class="text">
									{{item.ccTitle}}
								</view>
							</view>
						</view>
					</template>
				</titleColumn>
			</view>

			<view class="p-normal mt-normal box">
				<titleColumn @clickMore="navigateToSpaceDetails(meMemorialId,4)">
					<template #title>
						<view>文章[{{articleTotal}}]</view>
					</template>
					<template #content>
						<uv-empty mode="list" icon="empty-favor" v-if="!articleTotal"></uv-empty>
						<view class="article-list mt-small" v-for="(item, index) in articleList.filter((o,i)=>i<2)"
							:key="index" @click="navigateToArticle(item.id)">
							<articleCard :data="item" style="border-bottom-width: 0;"></articleCard>
							<!-- 
							<view class="p-normal mb-normal item">
								<view class="text-ellipsis-2 font-fs20 title">
									{{item.aTitle}}
								</view>
								<view class="font-fs12 mt-small d-flex d-flex-aic time">
									<uv-icon class="mr-small" name="clock-fill" color="#666666"></uv-icon>
									{{item.createTime}}
								</view>
								<view v-html="item.ccContent" class="mt-normal text-ellipsis-2 font-fs14 content">
								</view>
							</view> -->
						</view>
					</template>
				</titleColumn>
			</view>

			<view class="p-normal mt-normal box">
				<titleColumn @clickMore="navigateToSpaceDetails(meMemorialId,3)">
					<template #title>
						<view>留言[{{leaveMessageTotal}}]</view>
					</template>
					<template #content>
						<uv-empty mode="list" icon="empty-favor" v-if="!leaveMessageTotal"></uv-empty>
						<scroll-view class="scroll-list" scroll-y="true" v-if="leaveMessageTotal">
							<view class="item" v-for="(item, index) in leaveMessageList" :key="index"
								@click="handleLookMsg(item)">
								<leaveMessageCard :data="item"></leaveMessageCard>
							</view>
						</scroll-view>
					</template>
				</titleColumn>
			</view>

			<view class="p-normal mt-normal box">
				<titleColumn @clickMore="navigateToLanternRecord(meMemorialId)">
					<template #title>
						<view>挂灯笼记录[{{lanternTotal}}]</view>
					</template>
					<template #content>
						<uv-empty mode="list" icon="empty-favor" v-if="!lanternTotal"></uv-empty>
						<scroll-view class="scroll-list" scroll-y="true" v-if="lanternTotal">
							<view class="item" v-for="(item, index) in lanternList" :key="index">
								<record :data="item"></record>
							</view>
						</scroll-view>
					</template>
				</titleColumn>
			</view>

			<view class="p-normal mt-normal box">
				<titleColumn @clickMore="navigateToLightingRecord(meMemorialId)">
					<template #title>
						<view>点灯记录[{{lightingTotal}}]</view>
					</template>
					<template #content>
						<uv-empty mode="list" icon="empty-favor" v-if="!lightingTotal"></uv-empty>
						<scroll-view class="scroll-list" scroll-y="true" v-if="lightingTotal">
							<view class="item" v-for="(item, index) in lightingList" :key="index">
								<record :data="item"></record>
							</view>
						</scroll-view>
					</template>
				</titleColumn>
			</view>

			<view class="p-normal mt-normal box">
				<titleColumn @clickMore="navigateToCandleLightRecord(meMemorialId)">
					<template #title>
						<view>烛光记录[{{candleLightTotal}}]</view>
					</template>
					<template #content>
						<uv-empty mode="list" icon="empty-favor" v-if="!candleLightTotal"></uv-empty>
						<scroll-view class="scroll-list" scroll-y="true" v-if="candleLightTotal">
							<view class="item" v-for="(item, index) in candleLightList" :key="index">
								<record :data="item"></record>
							</view>
						</scroll-view>
					</template>
				</titleColumn>
			</view>

			<view class="p-normal mt-normal box">
				<titleColumn @clickMore="navigateToSacrificeRecord(meMemorialId)">
					<template #title>
						<view>供奉记录[{{oblationTotal}}]</view>
					</template>
					<template #content>
						<uv-empty mode="list" icon="empty-favor" v-if="!oblationTotal"></uv-empty>
						<scroll-view class="scroll-list" scroll-y="true" v-if="oblationTotal">
							<view class="mt-small item" v-for="(item, index) in oblationList" :key="index">
								<record :data="item"></record>
							</view>
						</scroll-view>
					</template>
				</titleColumn>
			</view>
		</view>


	</view>
</template>

<style lang="scss" scoped>
	.img-url {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow-y: scroll;
	}

	.album {
		.item {
			width: calc((100vw - 80px) / 3);
			height: calc((100vw - 80px) / 3);
			margin-right: 10px;
			margin-top: 10px;
			border-radius: 8px;
			overflow: hidden;
			position: relative;

			&:nth-of-type(3n) {
				margin-right: 0;
			}

			&:nth-of-type(-n + 3) {
				margin-top: 0;
			}

			.close {
				position: absolute;
				top: 4px;
				right: 4px;
			}
		}
	}

	.slot-content {
		textarea {
			color: #333 !important;
		}
	}

	.family-popup {
		width: 300px;
		padding: 40px 0;

		.color-333 {
			color: #333333;
		}
	}

	.banner {
		position: relative;
		height: 230px;

		.navbar {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1;
			color: #fff;
		}

		.bg {
			height: 265px;
		}

		.info {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: max-content;
			height: max-content;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-top: 20px;

			.avatar {
				width: 80px;
				height: 80px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				position: relative;

				.png {
					position: relative;
					z-index: 4;
				}

				.circle1,
				.circle2,
				.circle3 {
					position: absolute;
					border-radius: 50%;
				}

				.circle1 {
					width: 100%;
					height: 100%;
					background-color: rgba(111, 111, 111, .2);
					z-index: 3;
				}

				.circle2 {
					width: 87%;
					height: 87%;
					background-color: rgba(188, 188, 188, .3);
					z-index: 2;
				}

				.circle3 {
					width: 74%;
					height: 74%;
					background-color: rgba(222, 222, 222, .4);
					z-index: 1;
				}
			}

			.avatar-group {
				height: 80px;
				width: 180px;
			}

			.name {
				color: #fff;
				width: max-content;
				margin: auto;
			}

			.uid {
				color: #fff;
			}
		}
	}

	.main {
		background-color: transparent;
		position: relative;
		z-index: 10;

		&::before {
			content: "";
			position: absolute;
			top: 25px;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 10px 10px 0 0;
			background-color: #f5f5f5;
			z-index: -1;
		}

		.box {
			border-radius: 10px;
			box-shadow: 0 0 13px 1px #bcbbc77a;
			background-color: #fff;
		}

		.scroll-list {
			max-height: 240px;
		}

		.class {

			.statistics {
				.item {
					position: relative;

					.label {
						color: #999999;
					}

					.line {
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0;
						margin: auto !important;
						height: max-content;
					}
				}

			}

			.list {
				.item {
					width: max-content;
					width: 25%;

					.icon {
						width: 40px;
						height: 40px;
					}
				}
			}
		}

		.user-list-box {
			.user-list {
				overflow: hidden;
				height: 67px;

				.item {
					width: 46px;
					margin-right: calc((100% - 46px * 5) / 4);

					&:last-child {
						margin-right: 0;
					}

					.name {
						text-align: center;
					}
				}
			}

			.foot {
				border-top: 1px solid #dddddd;
				padding-top: 10px;
				margin-top: 10px;

				.count {
					color: #ff0000;
				}

				.btn {
					background-color: #12b886;
					border-radius: 6px;
					color: #fff;
				}
			}

		}

		.profile {
			.avatar {
				width: 80px;
				height: 110px;
			}

			.info {

				.lunar,
				.gregorian {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 18px;
					width: 18px;
					border-radius: 50%;
					border: 1px solid #000;
					color: #fff;
					font-size: 12px;

					&.lunar {
						background-color: #cb8112;
					}

					&.gregorian {
						background-color: #4e6ef2;
					}
				}
			}

			.text {
				color: #49484a;
				background-color: #fef0f0;
			}

		}

		.videoList {

			.item {
				padding: 15px;
				border-radius: 15px;
				margin-bottom: 10px;
				background-color: #f5f5f5;

				.video-box {
					width: 100%;
					border-radius: 15px;
					overflow: hidden;

					.video {
						width: 100%;
					}
				}

				.text {
					width: max-content;
					margin: auto;
					height: 30px;
					line-height: 30px;
					border-bottom: 1px solid #333;
				}
			}
		}

		.article-list {
			.item {
				background-color: #f6f6f6;
				border-radius: 8px;
				overflow: hidden;

				.title {
					color: #303133;
				}

				.time {
					color: #666666;
				}

				.content {
					color: #666666;
				}
			}
		}

	}
</style>